<script setup lang="ts">
import useForm from '@/hooks/useForm'
import type { FormRules } from 'element-plus'
import { add, update, getMenuSelect } from '@/api/system/menu'


/**
 * 表单规则
 */
const rules = reactive<FormRules>({
  type: [{ required: true, message: '必填项！', trigger: 'blur' }],
  title: [{ required: true, message: '必填项！', trigger: 'blur' }],
  path: [{ required: true, message: '必填项！', trigger: 'blur' }],
  name: [{ required: true, message: '必填项！', trigger: 'blur' }],
  icon: [{ required: true, message: '必填项！', trigger: 'blur' }],
  isBreadcrumd: [{ required: true, message: '必填项！', trigger: 'blur' }],
  hidden: [{ required: true, message: '必填项！', trigger: 'blur' }],
  cache: [{ required: true, message: '必填项！', trigger: 'blur' }],
})

const emit = defineEmits(['refresh'])

const initData = { status: true, sort: 1, meta: { title: '', icon: '', linkTo: '', cache: true, hidden: false, isBreadcrumd: true } }

const {
  formRef,
  visible,
  loading,
  title,
  formData,
  menuList,
  open,
  close,
  submitForm,
} = useForm<SysMenuType>({ add, update, getMenuSelect, initData }, emit)

console.log('menuList', menuList.value);
console.log('formData', formData.value);

// 导出父组件调用
defineExpose({
  open,
})
</script>

<template>
  <el-dialog :title="title + '菜单'" v-model="visible" @close="close" draggable>
    <el-scrollbar max-height="460px">
      <el-form ref="formRef" :rules="rules" :model="formData" :label-width="100" status-icon>
        <el-row>
          <el-col :span="12">
            <el-form-item label="上级菜单" prop="parentId">
              <el-cascader v-model="formData.parentId" :options="menuList" clearable filterable style="width: 400px;"
                :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'title' }" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="type">
              <el-radio-group v-model="formData.type">
                <el-radio value="1" border>菜单</el-radio>
                <el-radio value="2" border>按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="meta.title" :rules="{ required: true, message: '必选项', trigger: 'blur' }">
              <el-input v-model="formData.meta.title" placeholder="请输入菜单名称" maxlength="50" clearable show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序号" prop="sort">
              <el-input-number v-model="formData.sort" :min="1" :max="10000" style="width:600px" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <template v-if="formData.type === '2'">
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" placeholder="请输入权限标识" maxlength="50" clearable show-word-limit />
          </el-form-item>
        </template>
        <template v-else>
          <el-row>
            <el-col :span="12">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="formData.path" placeholder="请输入路由地址path值" maxlength="200" clearable
                  show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="路由名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入路由名称相对路径" maxlength="399" clearable show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单图标" prop="meta.icon" :rules="{ required: true, message: '必选项', trigger: 'blur' }">
                <el-input v-model="formData.meta.icon" placeholder="请输入图标名" maxlength="100" clearable show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重定向" prop="redirect">
                <el-input v-model="formData.redirect" placeholder="请输入路由重定向地址redirect值" maxlength="200" clearable
                  show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="外链地址" prop="meta.linkTo"
                :rules="{ required: true, message: '必选项', trigger: 'blur' }">
                <el-input v-model="formData.meta.linkTo" placeholder="请输入外链地址" maxlength="300" clearable
                  show-word-limit />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示导航" prop="meta.isBreadcrumd"
                :rules="{ required: true, message: '必选项', trigger: 'blur' }">
                <el-radio-group v-model="formData.meta.isBreadcrumd">
                  <el-radio :value="false">不显示</el-radio>
                  <el-radio :value="true">显示</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="是否隐藏" prop="meta.hidden"
                :rules="{ required: true, message: '必选项', trigger: 'blur' }">
                <el-radio-group v-model="formData.meta.hidden">
                  <el-radio :value="false">不隐藏</el-radio>
                  <el-radio :value="true">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否缓存" prop="meta.cache" :rules="{ required: true, message: '必选项', trigger: 'blur' }">
                <el-radio-group v-model="formData.meta.cache">
                  <el-radio :value="false">不缓存</el-radio>
                  <el-radio :value="true">缓存</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <el-form-item label="备注" prop="remarks">
          <el-input v-model="formData.remarks" type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入备注信息"
            maxlength="500" clearable show-word-limit />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="flex items-center justify-center">
        <el-button class="w-29" type="info" @click="close">取 消</el-button>
        <el-button class="w-29" type="primary" :loading="loading" @click="submitForm()">
          {{ loading ? '正在提交 ...' : '提 交' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>